<template>
  <div style="padding: 20px">
    <h3>防抖输入</h3>
    <input
      v-model="inputText"
      @input="handleInput"
      placeholder="输入关键字..."
    />
    <p>输入结果：{{ debounceResult }}</p>

    <h3 style="margin-top: 40px">节流滚动</h3>
    <div style="height: 1500px; background: #f0f0f0"></div>
    <p>滚动位置：{{ scrollY }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
impor@/hook/throttlerom '@/hook/debounce'
import { throttle } from '@/hook/throttle'

// 定义响应式变量
const inputText = ref('')
const debounceResult = ref('')
const scrollY = ref(0)

// 防抖处理输入
const handleInput = debounce(() => {
  debounceResult.value = inputText.value
}, 500)

// 节流处理滚动
const handleScroll = throttle(() => {
  scrollY.value = window.scrollY
}, 300)

// 绑定和解绑滚动监听
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>
